<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
		<title>发表文章</title>

		<!--引入Jquery-->
		<script src="js/jQuery/jquery-3.4.1.js"></script>
		<!--引入MarkDown-->
		<link rel="stylesheet" href="plug-ins/EditorMD/lib/codemirror/codemirror.min.css">
		<script type="text/javascript" src="plug-ins/EditorMD/editormd.amd.min.js"></script>
		<link rel="stylesheet" type="text/css" href="plug-ins/EditorMD/css/editormd.css"/>

		<link rel="stylesheet" href="u-admin/dist/modules/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="u-admin/dist/modules/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="u-admin/dist/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">
		<link rel="stylesheet" href="u-admin/dist/modules/summernote/summernote-lite.css">
		<link rel="stylesheet" href="u-admin/dist/modules/flag-icon-css/css/flag-icon.min.css">
		<link rel="stylesheet" href="u-admin/dist/css/demo.css">
		<link rel="stylesheet" href="u-admin/dist/css/style.css">

		<!--引入typeahead-->
		<script type="text/javascript" src="js/libs/typeahead/bootstrap3-typeahead.min.js"></script>
		<!--引入tagsinput-->
		<script type="text/javascript" src="js/libs/tagsinput/bootstrap-tagsinput.min.js"></script>
		<link rel="stylesheet" href="js/libs/tagsinput/bootstrap-tagsinput.css">
		<style>
			.displayDiv{
				display: none;
			}
		</style>
		<script>
			function tip() {
				document.body.onbeforeunload = function() {
					window.event.returnValue = "确认离开？";
				}
			}
		</script>
	</head>

	<body>
		<div id="app">
			<div class="main-wrapper">
				<div class="navbar-bg"></div>
				<div th:replace="commons/u-admin-bar::#navbar(currUri='edit-article')"></div>
				<div th:replace="commons/u-admin-bar::#sidebar(currUri='new-article')"></div>
				<div class="main-content">
					<section class="section">
						<form id="article-form" action="publishArticle" method="post">
						<h1 class="section-header">
							<div><i class="icon ion-ios-paperplane"></i> 发表文章</div>
						</h1>
						<div class="row">
							<div class="col-lg-10 col-md-12 col-12" style="height: 600px">
								<input onchange="tip()" required="required" id="articleTitle" type="text" style="margin-bottom: 10px" class="form-control"
									   autocomplete="off" name="articleTitle" placeholder="填写文章标题">
								<div id="editormd">
									<textarea onchange="tip()" id="input-content" name="articleContent" style="display:none;"></textarea>
								</div>
							</div>
							<div class="col-lg-2 col-md-12 col-12" style="height: 600px;overflow-x: hidden">
								<div class="row">
									<div class="col-12 col-md-12 col-lg-12">
										<ul class="list-group">
											<li class="list-group-item">
												<h6>分类目录</h6>
											</li>
											<li id="parent-kind" class="list-group-item" style="font-weight:300;height: 350px; overflow-y: auto;">
												<div th:each="kind:${kinds}" class="custom-control custom-checkbox">
													<input required="required" type="checkbox" class="custom-control-input" th:name="articleKinds" th:id="kind_+${kind.articleKindId}" th:value="${kind.articleKindName}">
													<label class="custom-control-label" th:for="kind_+${kind.articleKindId}">[[${kind.articleKindName}]]</label>
												</div>
											</li>
											<li class="list-group-item">
												<div>
													<a href="javaScript:showAddKind()">添加新的分类目录</a>
												</div>
												<div id="add-article-kind" class="displayDiv">
													<label for="new-kind">
														<small class="text-muted">新分类目录名</small>
													</label>
													<input id="new-kind" type="email" class="form-control"
														   aria-describedby="emailHelp"><br>
													<a href="javaScript:addKind()" class="btn btn-sm btn-secondary" style="font-size: 13px">添加新分类目录</a>
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>

						<div class="row" style="margin-top: 100px">
							<div class="col-lg-10 col-md-10 col-12">
								<ul class="list-group">
									<li class="list-group-item">
										<h6>标签</h6>
									</li>
									<li class="list-group-item">
										<div class="form-group">
											<small class="text-muted">添加新标签</small><br>
											<input maxlength="50" id="input-tags" name="articleTags" type="text"
												   data-role="tagsinput" class="form-control"/><br>
											<small>使用回车分隔多个标签</small>
										</div>
									</li>
								</ul>

								<script>
									$('#input-tags').tagsinput({
										maxTags: 5,
										typeahead: {
											//设置访问连接，返回一个数组即可
											source: function () {
												return $.get("getTags");
											},
											afterSelect: function () {
												this.$element[0].value = '';
											}
										},
										freeInput: true
									});
								</script>
							</div>
						</div>
						<div class="row" style="margin-top: 30px">
							<div  class="col-lg-10 col-md-10 col-12">&emsp;
								<a href="javaScript:save()" class="btn btn-sm btn-secondary"><i class="icon ion-compose"></i> 存入草稿</a>&emsp;
								<a href="javaScript:publish()" class="btn btn-sm btn-warning"><i class="icon ion-paper-airplane"></i> 发布</a>&emsp;
								<a href="javaScript:privatePublish()" class="btn btn-sm btn-success"><i class="icon ion-eye-disabled"></i> 私密发布</a>
							</div>
						</div>
						<br>
						</form>
					</section>
				</div>
				<div th:replace="commons/u-admin-bar::#footer"></div>
			</div>
		</div>
		<script src="js/jQuery/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			var editor;
			$(function () {
				editor = editormd("editormd", {
					placeholder : "此处开始编写文章的内容...",
					path: 'plug-ins/EditorMD/lib/',
					saveHTMLToTextarea: true,//注意3：这个配置，方便post提交表单
					/**上传图片相关配置如下*/
					imageUpload: true,
					imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
					imageUploadURL: "markdown/upload",//注意你后端的上传图片服务地址
					toolbarIcons : function() {
						// Or return editormd.toolbarModes[name]; // full, simple, mini
						return ["undo", "redo", "|", "bold", "italic", "quote", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "|", "list-ul", "list-ol", "hr", "|", "link", "image", "code", "code-block", "table", "html-entities", "|", "watch", "preview", "clear", "|", "help"]
					},
					taskList: true,
					tocm: true,         // Using [TOCM]
					tex: true,                   // 开启科学公式TeX语言支持，默认关闭
					flowChart: true,             // 开启流程图支持，默认关闭
					sequenceDiagram: true,
					codeFold : true,
					watch : true
				});
				//监听粘贴服务
				document.addEventListener('paste', function (event) {
					var items = (event.clipboardData || window.clipboardData).items;
					var file = null;
					if (items && items.length) {
						// 搜索剪切板items
						for (var i = 0; i < items.length; i++) {
							if (items[i].type.indexOf('image') !== -1) {
								file = items[i].getAsFile();
								break;
							}
						}
					} else {
						alert("当前浏览器不支持");
						return;
					}
					if (!file) {
						return;
					}
					// 此时file就是我们的剪切板中的图片对象
					// 这里是上传
					var xhr = new XMLHttpRequest();
					// 上传结束
					xhr.onload = function () {

					};
					xhr.onerror = function () {
						alert("网络异常，上传失败!");
					};
					var formData = new FormData();
					formData.append("editormd-image-file", file);
					xhr.open('POST', 'markdown/upload', true);
					xhr.send(formData);
					xhr.onreadystatechange = function () {
						if(xhr.readyState === 4){
							if(xhr.status >=200 && xhr.status < 300 || xhr.status === 304){
								//5.处理返回的结果
								var obj = xhr.responseText;
								var objarr = eval("("+obj+")");
								if (objarr["success"] == 1){
									editor.insertValue("![](" + objarr["url"] + ")");
								}else{
									alert("粘贴图片失败!");
								}
							}
						}
					}
				});
			});
			function showAddKind() {
				if ($('#add-article-kind').hasClass('displayDiv')){
					$('#add-article-kind').removeClass('displayDiv');
				}else{
					$('#add-article-kind').addClass('displayDiv');
				}
			}
			function addKind() {
				let val = $('#new-kind').val();
				if (val == ""){
					return false;
				}
				var reg = RegExp(/,/);
				if(val.match(reg)) {
					// 包含
					alert("类别名中请不要包含英文逗号！");
					return false;
				}
					var id = 'id_'+val;
				$('#parent-kind').prepend($("<div class='custom-control custom-checkbox'>" +
						"<input type='checkbox' class='custom-control-input' checked='checked' name='articleKinds' id="+id+"' value='"+val+"'>" +
						"<label for='"+id+"' class='custom-control-label'>"+val+"</label></div>"));
				$('#new-kind').val('');
			}
			function publish() {
				let title = $('#articleTitle').val();
				let content = $('#input-content').val();
				if (title == ""){
					alert("请填写标题！");
					return false;
				}
				if (content == ""){
					alert("请填写正文！");
					return false;
				}
				$('#article-form').submit();
			}
			function save() {
				let title = $('#articleTitle').val();
				let content = $('#input-content').val();
				if (title == ""){
					alert("请填写标题！");
					return false;
				}
				if (content == ""){
					alert("请填写正文！");
					return false;
				}
				$('#article-form').attr("action","savePublish");
				$('#article-form').submit();
			}
			function privatePublish() {
				let title = $('#articleTitle').val();
				let content = $('#input-content').val();
				if (title == ""){
					alert("请填写标题！");
					return false;
				}
				if (content == ""){
					alert("请填写正文！");
					return false;
				}
				$('#article-form').attr("action","privatePublish");
				$('#article-form').submit();
			}
		</script>
		<script type="text/javascript" src="u-admin/dist/modules/jquery.min.js"></script>
		<script type="text/javascript" src="u-admin/dist/modules/popper.js"></script>
		<script type="text/javascript" src="u-admin/dist/modules/tooltip.js"></script>
		<script type="text/javascript" src="u-admin/dist/modules/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="u-admin/dist/modules/nicescroll/jquery.nicescroll.min.js"></script>
		<script type="text/javascript" src="u-admin/dist/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
		<script type="text/javascript" src="u-admin/dist/js/sa-functions.js"></script>
		<script type="text/javascript" src="u-admin/dist/modules/chart.min.js"></script>
		<script type="text/javascript" src="u-admin/dist/modules/summernote/summernote-lite.js"></script>
		<script type="text/javascript" src="u-admin/dist/js/scripts.js"></script>
		<script type="text/javascript" src="u-admin/dist/js/custom.js"></script>
		<script type="text/javascript" src="u-admin/dist/js/demo.js"></script>

	</body>
</html>
